﻿<template>
  <div class="formStyle">
    <el-form ref="form" :model="form" label-width="150px" style="margin-top:30px;">
      <el-form-item label="训练轮数" class="titleStyle">
        <!-- <el-input v-model="form.name"></el-input> -->
        <el-slider v-model="epoch" :min="1" :max="1000" show-input class="elstyle" />
      </el-form-item>
      <el-form-item label="批量大小" class="titleStyle">
        <!-- <el-input v-model="form.name"></el-input> -->
        <el-slider v-model="batchsize" :min="1" :max="16" show-input class="elstyle" />
      </el-form-item>
      <el-form-item label="学习率" class="titleStyle">
        <el-select v-model="lr" placeholder="请选择学习率" class="selectStyle">
          <el-option label="1e-4" value="1e-4" />
          <el-option label="1e-5" value="1e-5" />
        </el-select>
      </el-form-item>
      <el-form-item label="学习率预热(%)" class="titleStyle">
        <!-- <el-input v-model="form.name"></el-input> -->
        <el-slider v-model="lrwarmup" :min="1" :max="100" show-input class="elstyle" />
      </el-form-item>
      <el-form-item label="学习率调度器" class="titleStyle">
        <el-select v-model="lr_scheduler" placeholder="请选择学习率调度器" class="selectStyle">
          <el-option label="StepLR" value="StepLR" />
          <el-option label="MultiStepLR" value="MultiStepLR" />
          <el-option label="ExponentialLR" value="ExponentialLR" />
          <el-option label="ReduceLROnPlateau" value="ReduceLROnPlateau" />
          <el-option label="CosineAnnealingLR" value="CosineAnnealingLR" />
        </el-select>
      </el-form-item>
      <el-form-item label="优化器" class="titleStyle">
        <el-select v-model="opt" placeholder="请选择优化器" class="selectStyle">
          <el-option label="SGD" value="SGD" />
          <el-option label="SGDM" value="SGDM" />
          <el-option label="AdaGrad" value="AdaGrad" />
          <el-option label="AdaDelta" value="AdaDelta" />
          <el-option label="Adam" value="Adam" />
          <el-option label="RMSProp" value="RMSProp" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item> -->
      <!-- <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item> -->
      <!-- <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item> -->
      <el-form-item class="btn">
        <el-button type="primary" style="margin-left: 60px;" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  <style>
  .formStyle {
    width: 800px;
  }

  .elstyle {
    margin-left: 80px;
    width: 570px;
  }

  .btn {
    margin-top: 80px;
  }

  .selectStyle {
    display: block;
    width:570px;
    margin-left: 80px;
  }

  .titleStyle {
    margin-top:50px;
  }

  </style>

<script>
// import basic from '@/views/training/index'
export default {
  data() {
    return {
      epoch: 20,
      batchsize: 16,
      lrwarmup: 50,
      lr_scheduler: '',
      lr: '',
      opt: '',
      form: {
        title: '',
        model: '',
        dataset: '',
        isDefinedTest: false
      }
    }
  },
  created() {
    var basicInfo = this.$route.query
    this.form.title = basicInfo.title
    this.form.model = basicInfo.model
    this.form.dataset = basicInfo.dataset
    this.form.isDefinedTest = basicInfo.isDefinedTest
    console.log('SaveBasic--', this.form)
  },
  methods: {
    // 获取当前的时间
    getNowTime() {
      const dt = new Date()
      var y = dt.getFullYear()
      var mt = (dt.getMonth() + 1).toString().padStart(2, '0')
      var day = dt.getDate().toString().padStart(2, '0')
      var h = dt.getHours().toString().padStart(2, '0')
      var m = dt.getMinutes().toString().padStart(2, '0')
      var summitTime = y + '-' + mt + '-' + day + ' ' + h + ':' + m
      console.log('提交时间', summitTime)
      return summitTime
    },
    onSubmit() {
      // console.log(this.epoch)
      // console.log(this.batchsize)
      // console.log(this.lr)
      // console.log(this.lrwarmup)
      // console.log(this.lr_scheduler)
      // console.log(this.opt)
      // console.log(this.form)
      const that = this
      this.$confirm('确认提交模型训练任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          duration: 1000,
          type: 'success',
          message: '提交成功!'
        })
        setTimeout(() => {
          const params = {
            lr: this.lr,
            epoch: this.epoch + ''
          }
          this.$store.dispatch('user/training', params).then((res) => {
            console.log(res.body)
            this.$notify({
              title: '开始训练',
              message: '点击查看，查看训练控制台输出。',
              type: 'success',
              duration: 0
            })
          }).catch(res => {
            console.log(res)
          })

          this.$router.push({
            path: '/training/results',
            query: {
              fromSet: true,
              summitTime: that.getNowTime(),
              title: that.form.title,
              model: that.form.model,
              dataset: that.form.dataset,
              isDefinedTest: that.form.isDefinedTest,
              epoch: that.epoch,
              batchsize: that.batchsize,
              lr: that.lr,
              lrwarmup: that.lrwarmup,
              lr_scheduler: that.lr_scheduler,
              opt: that.opt
            }
          }
          )
        }, 1500)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '提交取消'
        })
      })
    }
  }
}
</script>
